<script lang="ts" setup>
import IndexTitle from './IndexTitle.vue'
import ChartsView from '../../components/ChartsView.vue'
import moment from 'moment'
import { ref, onMounted } from 'vue'
import {Lineoption} from '../../utils/option'
// // 定时器每隔两分钟放入新的时间
// setInterval(() => {
//   option.value.dataset.source[0].shift()
//   option.value.dataset.source[0].push(moment().format('hh:mm:ss'))
//   getData(charts)
// }, 3000)
// 接收后端数据

// 封装echarts组件
// import LineCharts from './LineCharts.vue'
// 获取学员分布情况的数据
let WS = new WebSocket('ws://localhost:3002/bigscreen/websockets?id=10086')
// 创建X轴的时间
let timeArr = []
// 获取当前时间戳
let currentTime = Date.now()
for (let a = 6; a > 0; a--) {
  timeArr.push(moment(currentTime - a * 2 * 60 * 1000).format('hh:mm:ss'))
}
// 定义一个让dom更新的唯一数据
let key = ref(0)
// 将数组放在option中
Lineoption.value.dataset.source = [timeArr]
// 接收后端数据
// 接收消息
WS.onmessage = (e) => {
  key.value = key.value + 1
  //   console.log(e,'111');
  // 接收数据并且转换为对象
  let { legendData, seriesData } = JSON.parse(e.data)
  console.log(22, legendData, seriesData)

  // 定义series数据
  let seriesArr = []
  // 组合具体数据
  let sourceData = seriesData.map((arr, index) => {
    arr.unshift(legendData[index])
    seriesArr.push({
      type: 'line',
      smooth: true,
      seriesLayoutBy: 'row',
      emphasis: { focus: 'series' },
      symbol: 'none'
    })
    return arr
  })
  //   修改option
  Lineoption.value.series = seriesArr
  Lineoption.value.dataset.source.push(...sourceData)
  // charts.setOption(option.value)
}
// 定时器 让图表下面的时间每隔一会就更新一次
setInterval(() => {
  timeArr.shift()
  timeArr.push(moment().format('hh:mm:ss'))
  Lineoption.value.dataset.source[0] = timeArr
  key.value = key.value + 1
}, 3000)
// 给echarts子组件中的图标做适配
const mycharts = ref()
onMounted(() => {
  // window.onresize=()=>{
  // //   mycharts.value.charts.resize()
  // // }
  window.addEventListener('resize', () => mycharts.value.charts.resize())
})
</script>
<template>
  <div class="content-box-bottom">
    <!-- 标题 -->
    <IndexTitle title="学生分布情况"></IndexTitle>
    <!-- 下面内容 -->
    <div class="contentbottoms">
      <!-- 封装echarts组件 -->
      <ChartsView :option="Lineoption" :key="key" ref="mycharts"> </ChartsView>
      <!-- 多个线行图 -->
      <!--  -->
    </div>
  </div>
</template>
<style lang="scss" scoped>
.content-box-bottom {
  width: 74%;
  height: 40%;
  position: absolute;
  bottom: 0;
  left: 50px;
  .contentbottoms {
    background-color: #1b1f60;
    width: 100%;
    height: calc(100% - 50px);
    margin-top: 10px;
    height: 70%;
  }
}
</style>